<template>
    <el-row class="edit">
        <el-container style="height: 100%;">
            <el-header height="60px">
                新增设备
            </el-header>
            <el-main>
                <el-form ref="addSmtData" :rules="rules" :model="addSmtData" label-width="115px"
                         label-position="left">
                    <el-form-item label="设备名称 :" prop="name">
                        <el-input v-model="addSmtData.name" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备编号 :" prop="code">
                        <el-input v-model="addSmtData.code" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item label="场地名称 : " prop="yardName">
                        <comtree @treeSelected = "treeSelected" v-model="addSmtData.yardName" ref="comtree"></comtree>
                    </el-form-item>
                    <el-form-item label="厂商编码 :" prop="firmCode">
                        <el-input v-model="addSmtData.firmCode" placeholder="请输入厂商编码"></el-input>
                    </el-form-item>
                    <el-form-item label="logo文本 :" prop="logo">
                        <el-input v-model="addSmtData.logo" placeholder="请输入logo"></el-input>
                    </el-form-item>
                    <el-form-item label="设备型号 : " prop="modnName">
                        <el-select v-model="addSmtData.modnName" placeholder="请选择设备型号" style="width: 100%;" @change="getValue()">
                            <el-option
                                    v-for="inst in modnOptions"
                                    :key="inst.uuid"
                                    :label="inst.name"
                                    :value="inst.name">
                                {{inst.name}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备类型 :" prop="tyidName">
                        <el-input v-model="addSmtData.tyidName" placeholder="设备类型" readonly></el-input>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer height="80px">
                <el-row style="height: 20px;margin-bottom: 5px;">
                    <transition name="el-zoom-in-bottom">
                        <el-row v-show="infoShow" style="display: flex;justify-content: center;align-items: center;">
                            {{ (info !== '') ? "提示信息："+info : ''}}
                        </el-row>
                    </transition>
                </el-row>

                <el-row style="display: flex;justify-content: center;align-items: center;">
                    <el-button @click="submit" type="primary">
                        保存
                    </el-button>
                    <el-button @click="editOut">
                        取消
                    </el-button>
                </el-row>
            </el-footer>
        </el-container>
    </el-row>
</template>

<script>
    import {replaceSpacesObj} from '../../../utils/webUtils.js';
    import comtree from '../../public/comtree.vue'
    // import {getDataForSP, writePageInfo} from "../../../utils/webUtils";

    export default {
        components: {comtree},
        name: "addType",
        data() {
            return {
                addSmtData: {
                    name: '',
                    code:'',
                    yardUuid:'',
                    yardName:'',
                    yardPath:'',
                    icon:'',
                    logo:'',
                    firmCode:'',
                    tyidUuid:'',
                    tyidName:'',
                    modnUuid:'',
                    modnName:''
                },
                modnOptions:[],
                rules: {
                    name: [
                        {required: true, message: '设备名称不能为空', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '设备编号不能为空', trigger: 'blur'},
                    ]
                },
                info: '',
                infoShow: false
            }
        },
        mounted() {
            this.queryModn();
            this.$refs.comtree.autoWidth = '185'
            this.$refs.comtree.autoHeight = '150'
        },
        methods: {
            // 获取当前树节点所有信息
            treeSelected (treeNode) {
                this.addSmtData.yardName = treeNode.name
                this.addSmtData.yardUuid = treeNode.id
            },
            //查询设备型号
            queryModn() {
                this.axios.request({
                    method: "get",
                    url: "./smt/kdi/modn/search/findAll",
                }).then(response => {
                    this.modnOptions = response.data.content;
                }).catch(error => {
                    console.log(error);
                });
            },
            getValue(){
                this.modnOptions.forEach( list =>{
                    if(list.name === this.addSmtData.modnName){
                        this.addSmtData.tyidName = list.tyidName
                        this.addSmtData.tyidUuid = list.tyidUuid
                    }
                })
            },
            submit() {
                this.$refs['addSmtData'].validate((valid) => {
                    if (!valid) {
                        return;
                    }
                    this.addSmtData = replaceSpacesObj(this.addSmtData);
                    this.axios.request({
                        method: "post",
                        url: "./smt/kdi/dev",
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8"
                        },
                        data: {
                            name: this.addSmtData.name,
                            code:this.addSmtData.code,
                            yardUuid:this.addSmtData.yardUuid,
                            yardName:this.addSmtData.yardName,
                            yardPath:this.addSmtData.yardPath,
                            icon:this.addSmtData.icon,
                            logo:this.addSmtData.logo,
                            firmCode:this.addSmtData.firmCode,
                            tyidUuid:this.addSmtData.tyidUuid,
                            tyidName:this.addSmtData.tyidName,
                            modnUuid:this.addSmtData.modnUuid,
                            modnName:this.addSmtData.modnName
                        }
                    }).then(() => {
                        this.endProcessing();
                    }).catch(error => {
                        console.log(error);
                        this.info = '设备新增失败';
                        this.infoShow = true;
                    });
                });
            },
            endProcessing() {
                this.info = this.info + '新增成功,两秒后关闭';
                this.infoShow = true;
                setTimeout(() => {
                    this.infoShow = false;
                    this.$emit("editState", false);
                    this.cleanSmt();
                    this.info = '';
                }, 2000);
            },
            cleanSmt() {
                this.addSmtData = {
                    name: '',
                    code:'',
                    yardUuid:'',
                    yardName:'',
                    yardPath:'',
                    icon:'',
                    logo:'',
                    firmCode:'',
                    tyidUuid:'',
                    tyidName:'',
                    modnUuid:'',
                    modnName:''
                };
            },
            editOut() {
                this.infoShow = false;
                this.cleanSmt();
                this.info = '';
                this.$emit("editState", false);
            }
        }
    }
</script>

<style scoped>
    .edit {
        width: 334px;
        height: 100%;
        z-index: 100;
    }


</style>